<template>
	<view class="u-rela">
		<view class="page-top">
			<image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-fy-1.png" mode="widthFix">
			</image>
			<div class="text-wrap">
				<view class="text-1">非遗传承</view>
				<view class="text-2">古老鲜活的文化历史，传承千年，滋养当下</view>
			</div>
		</view>
		<view class="page-wrap">
			<view class="desc">
				余江丝翎浮雕结合传统木雕工艺将工笔国画经过再创作并以浮雕的形式立体呈现在深色硬木上，通过“取神得形，以线立形，以形达意”获取神态与形体的完美统一，在保留中国工笔画精致细腻、形神兼备特点的同时。
			</view>
			<view class="u-font-36 blod u-m-t-20">不可错过的精彩</view>
			<!-- 余江丝翎浮雕 -->
			<view class="u-rela" v-for="item in villages_inherited_list" :key="item.id">
				<view class="img-wrap">
					<image
						:src="item.thumbnail == '' ? 'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-fy-2.png' : item.thumbnail"
						mode="widthFix"></image>
				</view>
				<div class="u-flex u-row-between">
					<view class="u-font-32">{{ item.title }}</view>
					<div class="btn-view">
						<image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/icon-view-w.png"
							mode="widthFix"></image>
						<text>查看</text>
					</div>
				</div>
				<u-read-more class="read-more" :shadow-style="shadowStyle" show-height="150" close-text="展开"
					:toggle="true">
					<rich-text :nodes="item.content"></rich-text>
				</u-read-more>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				content1: `余江丝翎浮雕是余江雕刻从业者在传统浮雕技艺基础上派生出来的一种木雕技艺。于上世纪五十年代末期在江西余江得到广泛推广，迄今已有六十余年的历史。余江丝翎浮雕是余江雕刻从业者在传统浮雕技艺基础上派生出来的一种木雕技艺。于上世纪五十年代末期在江西余江得到广泛推广，迄今已有六十余年的历史。`,
				content2: `余江被誉为“木雕之乡”， 2013年余江木雕列入江西省第四批非物质文化遗产代表性名录。
余江木雕源于唐宋，兴盛于明清。余江被誉为“木雕之乡”， 2013年余江木雕列入江西省第四批非物质文化遗产代表性名录。
余江木雕源于唐宋，兴盛于明清`,
				shadowStyle: {
					backgroundImage: "none",
					paddingTop: "0",
					marginTop: "20rpx"
				},

				villages_inherited_list: []
			}
		},
		onLoad() {
			// 非遗传承列表
			this.get_villages_inherited()
		},
		onPullDownRefresh() {
			// 非遗传承列表
			this.get_villages_inherited()
		},
		methods: {
			// 非遗传承列表
			get_villages_inherited() {
				uni.showLoading({
					title: '加载中...'
				});
				this.$http({
					url: this.api.villages_inherited,
					method: 'GET'
				}).then(res => {
					// console.log(res, '非遗传承列表');
					if (res.code == 1) {
						uni.hideLoading();
						uni.stopPullDownRefresh();
						this.villages_inherited_list = res.data.list
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.page-top {
		position: relative;
		width: 750rpx;
		height: 500rpx;
		z-index: 1;

		image {
			width: 100%;
			height: 100%;
		}

		.text-wrap {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 2;
			text-align: center;

			.text-1 {
				font-size: 60rpx;
				font-family: AlimamaDongFangDaKai;
				font-weight: 400;
				color: #FFFFFF;
				margin-top: 140rpx;
			}

			.text-2 {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				margin-top: 100rpx;
			}
		}
	}

	.page-wrap {
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		background-color: #fff;
		padding: 30rpx;
		margin-top: -50rpx;
		position: relative;
		z-index: 2;

		.desc {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000000;
			line-height: 48rpx;
			margin-top: 20rpx;
		}


	}

	.img-wrap {
		width: 690rpx;
		// height: 320rpx;
		margin-top: 35rpx;
		margin-bottom: 20rpx;

		image {
			width: 690rpx;
			height: 320rpx;
		}
	}

	.btn-view {
		width: 140rpx;
		height: 56rpx;
		background: #07C160;
		border-radius: 28px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;

		image {
			width: 30rpx;
			height: 30rpx;
			margin-right: 10rpx;
		}
	}

	.read-more {
		/deep/ .u-content__showmore-wrap {
			justify-content: flex-start;
			width: 160rpx;
			height: 66rpx;
			background: #F7FEFC;
			border: 1px solid #07C160;
			border-radius: 33rpx;
			padding-bottom: 0;
			text-align: center;
			padding-left: 38rpx;

			text {
				font-size: 28rpx !important;
				color: #07C160 !important;
			}
		}

	}
</style>
<style>
	page {
		padding: 0;
	}
</style>